<template>
  <wux-spin nested :spinning="spinning">
    <div class="member-root">
      <croll-view>
        <wux-toptips id="wux-toptips" />
        <div
          class="checked"
          v-show="isChecked"
          :style="{
            height: tHeight + 'px',
            width: tWidth + 'px',
            left: tLeft + 'px',
            right: tRight + 'px',
            top: tTop + 'px',
          }"
        >
          <i class="iconfont icon-Checklabel"></i>
        </div>
        <ul class="pay-grid">
          <li class="pay-item" v-for="(item, index) in payList" :key="index">
            <div class="item" @click="selectItem(index)">
              <div class="pay-item-label">
                <span class="item-deprecated"
                  ><span class="unit">￥</span>{{ item.deprecated }}</span
                >
                <span class="item-label"
                  ><span class="unit">￥</span>{{ item.amount }}</span
                >
              </div>
              <div class="pay-item-month">{{ item.monthDes }}</div>
            </div>
          </li>
        </ul>

        <div class="detail">
          <img src="../../static/images/member1.jpg" />
          <img src="../../static/images/member2.jpg" />
          <label class="checkbox">
            <checkbox-group @change="onChange" class="checkbox-content">
              <label>
                <checkbox value="0" />
              </label>
            </checkbox-group>
            <div class="label">
              我已阅读并同意《<span class="info" @click="toManualPage"
                >卡卡伴旅 - 会员权益隐私政策</span
              >》
            </div>
          </label>
        </div>

        <div class="buy-btn">
          <div class="btn">
            <div class="descript">
              <span class="unit">￥</span>{{ amount }} / {{ month }}
            </div>
            <div class="btn-label" @click="buy">立即购买</div>
          </div>
        </div>
      </croll-view>
    </div>
  </wux-spin>
</template>
<script>
import wxApi from "@/api/wx_api";
import { payForMember } from "@/api/pay";
import { $wuxToptips } from "../../static/wux/index";
export default {
  data() {
    return {
      payList: [
        // { id: 'month', deprecated: '15', amount: '1', month: '按月' }
        // { id: 'three-month', deprecated: '45', amount: '19.9', month: '按季' },
        // { id: 'half-year', deprecated: '90', amount: '45', month: '半年' },
        { id: 'year', deprecated: '130', amount: '9.9', month: '年', monthDes: '年度VIP' }
      ],
      payInfo: {},
      tHeight: 0,
      tWidth: 0,
      tLeft: 0,
      tRight: 0,
      tTop: 0,
      isChecked: false,
      amount: 0,
      month: '',
      checked: false,
      nowScrollTop: 0
    };
  },
  computed: {
    spinning() {
      return this.$store.state.paySpinning;
    }
  },
  mounted() {
    this.nowScrollTop = 0;
    this.selectItem(0);
  },
  onPageScroll: function (e) {
    this.nowScrollTop = e.scrollTop;
  },
  methods: {
    payForMember,
    selectItem(index) {
      let _query = wx.createSelectorQuery();
      let that = this;
      that.payInfo = this.payList[index];
      that.amount = this.payList[index].amount;
      that.month = this.payList[index].month;
      _query.selectAll('.item').boundingClientRect()
      _query.exec((res) => {
        that.tHeight = res[0][index].height
        that.tWidth = res[0][index].width
        that.tLeft = res[0][index].left
        that.tRight = res[0][index].right
        that.tTop = res[0][index].top + this.nowScrollTop
        that.isChecked = true;
      })
    },
    toManualPage() {
      this.$router.push({ path: "/pages/memberManual" })
    },
    onChange(e) {
      this.checked = e.target.value.length > 0;
    },
    buy() {
      if (!this.checked) {
        $wuxToptips().error({
          hidden: false,
          text: "请先阅读会员权益隐私政策!",
          duration: 1000,
          success() {
            wx.createSelectorQuery().select('.member-root').boundingClientRect(function (rect) {
              // 使页面滚动到底部
              wx.pageScrollTo({
                scrollTop: rect.bottom + 5000
              })
            }).exec()
          }
        });
      } else {
        this.$store.dispatch("savePayinfo", this.payInfo);
        this.$store.dispatch("setPaySpinning", true);
        this.payForMember();
      }
    }
  }
};
</script>

<style scoped lang="less">
.member-root {
  height: 100vh;
  background: #ffffff;
  .pay-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px;

    .pay-item {
      background-color: #ffffff;
      padding: 10px;
      width: 80%;
      box-sizing: border-box;
      margin: 0 auto;
      float: left;
      .item {
        width: 100%;
        text-align: center;
        display: flex;
        .pay-item-label {
          // border: 1px solid #daa520;
          border: 1px solid #663300;
          // color: #b8860b;
          color: #61370e;
          background-color: #fafad2;
          padding: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          flex: 2;
          .item-deprecated {
            .unit {
              font-size: 10px;
            }
            font-size: 12px;
            text-decoration: line-through;
            padding-right: 2px;
          }
          .item-label {
            .unit {
              font-size: 15px;
            }
            font-size: 25px;
          }
        }
      }
      .pay-item-month {
        color: #ffffff;
        // border: 1px solid #daa520;
        // background-color: #daa520;
        border: 1px solid #663300;
        background-color: #663300;
        line-height: 63px;
        padding: 5px;
        flex: 1;
        font-size: 14px;
      }
    }
  }
  .checked {
    i {
      font-size: 24px;
    }
    position: absolute;
    background-color: #ababab48;
    color: #4caf50;
  }

  .detail {
    padding-bottom: 100px;
    img {
      width: 100%;
      height: 275px;
    }
    .checkbox {
      padding: 0 5px;
      .checkbox-content {
        display: inline-block;
      }
      .label {
        font-size: 14px;
        display: inline-block;
        margin-left: 5px;
        .info {
          color: rgb(20, 87, 233);
          text-decoration: underline;
        }
      }
    }
  }

  .buy-btn {
    position: fixed;
    bottom: 30px;
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    .btn {
      display: flex;
      border-radius: 10px;
      // padding: 10px;
      // background-color: #daa520;
      // border: 1px solid #daa520;
      background-color: #663300;
      border: 1px solid #663300;
      .descript {
        // color: #b8860b;
        color: #61370e;
        padding: 11px 15px;
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
        // margin: -10px;
        flex: 3;
        background-color: #fafad2;
        .unit {
          font-size: 10px;
        }
      }
      .btn-label {
        padding: 11px;
        font-size: 16px;
        color: #ffffff;
        flex: 1;
        text-align: center;
      }
    }
  }
}
</style>